<template>
  <a-card title="问卷明细">
    <router-link slot="extra" to>
      <a-button @click="$router.go(-1)">返回</a-button>
    </router-link>
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="6" :sm="8">
            <a-form-item label="被评估人姓名" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 0}">
              <a-input placeholder="请输入" v-model="queryParam.assessedName" allowClear></a-input>
            </a-form-item>
          </a-col>

          <a-col :md="5" :sm="8">
            <a-form-item label="评估状态" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 0}">
              <a-select v-model="queryParam.appraiseStatus">
                <a-select-option value="">全部</a-select-option>
                <a-select-option value="1">已评估</a-select-option>
                <a-select-option value="0">未评估</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :md="7" :sm="8">
            <a-form-item label="评估人与被评估人关系" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 0}">
              <a-select v-model="queryParam.appraiseTiesId">
                <a-select-option value="">全部</a-select-option>
                <a-select-option value="1">直接上级</a-select-option>
                <a-select-option value="2">相关上级</a-select-option>
                <a-select-option value="3">直接平级</a-select-option>
                <a-select-option value="4">相关平级</a-select-option>
                <a-select-option value="5">下级</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
            <a-col :md="4" :sm="24">
              <a-button type="primary" @click="searchQuery">查询</a-button>
              <a-button style="margin-left: 8px" @click="searchReset">重置</a-button>
            </a-col>
          </span>

          <a-col :md="5" :sm="6">
            <a-form-item label="评估人部门" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 0}">
              {{ dataForm.deptName }}
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="6">
            <a-form-item label="评估人姓名" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 0}">
              {{ dataForm.appraiserName }}
            </a-form-item>
          </a-col>
          <a-col :md="5" :sm="6">
            <a-form-item label="评估人手机号" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 0}">
              {{ dataForm.appraiserPhone }}
            </a-form-item>
          </a-col>
          <a-col :md="3" :sm="6">
            <a-form-item label="问卷数量" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 0}">
              {{ dataForm.totalNum }}
            </a-form-item>
          </a-col>
          <a-col :md="3" :sm="6">
            <a-form-item label="已评估" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 0}">
              {{ dataForm.appraiserNum }}
            </a-form-item>
          </a-col>
          <a-col :md="3" :sm="6">
            <a-form-item label="未评估" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 0}">
              {{ dataForm.assessedNum }}
            </a-form-item>
          </a-col>

        </a-row>
      </a-form>
    </div>

    <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataList"
        :pagination="ipagination"
        :loading="loading"
        @change="tableChangeHandle">

        <span slot="action" slot-scope="text, record">
          <a @click="handleDetail(record)">详情</a>
          <a-divider type="vertical" />
          <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
            <a>删除</a>
          </a-popconfirm>
        </span>


    </a-table>

    <assessment-details ref="assessmentDetails" v-if="assessmentDetailsVisible"></assessment-details>
  </a-card>
</template>

<script>
import AssessmentDetails from './assessment-details'
import { postAction } from '@/api/manage'

export default {
  name: "details",
  components: {
    AssessmentDetails
  },
  data () {
    return {
      loading: false,
      modelFormVisible: false,
      assessmentDetailsVisible: false,
      dataForm: {
        deptName: '',
        appraiserName: '',
        appraiserPhone: '',
        totalNum: 0,
        appraiserNum: 0,
        assessedNum: 0,
      },
      queryParam: {
        page2: 1,
        limit2: 10,
        questionId: '',
        appraiserPhone: '',
        appraiseStatus: '',
        appraiseTiesId: '',
      },
      dataList: [
        // { id: '1', username: '张三', dept: '财务部', relations: '直接上级', status: 1, updateTime: '2022-12-21 00:00:00' },
        // { id: '2', username: '李四', dept: '财务部', relations: '相关上级', status: 0, updateTime: '2022-12-21 00:00:00' },
      ],
      selectedRowKeys: [],
      selectionRows: [],
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: "center",
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          }
        },
        {
          title: '被评估人姓名',
          dataIndex: 'assessedName',
          align: "center",
        },
        {
          title: '被评估人部门',
          dataIndex: 'assessedDept',
          align: "center",
        },
        {
          title: '评估人与被评估人关系',
          dataIndex: 'appraiseTies',
          align: "center",
          width: 180,
        },
        {
          title: '评估状态',
          dataIndex: 'appraiseStatus',
          align: "center",
          customRender: function (text) {
            if (text === 0) {
              return '未评估'
            } else if (text === 1) {
              return <span style="color: green;">已评估</span>
            }
          }
        },
        {
          title: '评估完成时间',
          dataIndex: 'appraiseTime',
          align: "center",
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: "center",
          scopedSlots: { customRender: 'action' },
        }
      ],
      /* 分页参数 */
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条"
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      url: {
        list: '/appraise/getAppraiseShow'
      }
    }
  },
  watch: {
    $route: {
      handler(to, from) {
        //深度监听，同时也可监听到param参数变化
        this.$nextTick(() => {
          if (to.name === 'questionnaire-details' && (!from || from.name === 'questionnaire-basic')) {
            this.queryParam.questionId = to.query.questionId
            this.queryParam.appraiserPhone = to.query.appraiserPhone
            console.log('this.queryParam.questionId', this.queryParam.questionId)
            console.log('this.queryParam.appraiserPhone', this.queryParam.appraiserPhone)
            Promise.all([
              this.getList()
            ]).then(() => {
              console.log('this.dataList', this.dataList)
            }).catch(res => {
              console.log('res', res)
            })
          }
        })
      },
      deep: true,
      // 代表在wacth里声明了这个方法之后立即先去执行handler方法
      immediate: true
    }
  },
  methods: {
    getList() {
      return new Promise((resolve, reject) => {
        this.loading = true
        this.queryParam.page2 = this.ipagination.current
        this.queryParam.limit2 = this.ipagination.pageSize
        postAction(this.url.list, this.queryParam).then(res => {
          this.loading = false
          if (!res.success) {
            return this.$message.error({
              content: res.message,
              onClose: () => reject()
            })
          }
          this.dataList = res.result.list
          this.ipagination.total = res.result.total
          this.dataForm.deptName = this.dataList[0].deptName
          this.dataForm.appraiserName = this.dataList[0].appraiserName
          this.dataForm.appraiserPhone = this.dataList[0].appraiserPhone
          this.dataForm.totalNum = this.dataList.length
          for (let i = 0; i < this.dataList.length; i++) {
            if (this.dataList[i].appraiseStatus === 0) {
              this.dataForm.assessedNum++;
            } else if (this.dataList[i].appraiseStatus === 1) {
              this.dataForm.appraiserNum++;
            }
          }
          resolve()
        }).catch(() => {
          this.loading = false
          reject()
        })
      })
    },
    searchQuery () {
      this.ipagination.current = 1
      this.getList()
      // 点击查询清空列表选中行
      this.onClearSelected()
    },
    onClearSelected () {
      this.selectedRowKeys = [];
      this.selectionRows = [];
    },
    // 多选
    onSelectChange (selectedRowKeys, selectionRows) {
      this.selectedRowKeys = selectedRowKeys;
      this.selectionRows = selectionRows;
    },
    searchReset() {
      this.queryParam.assessedName = ''
      this.queryParam.appraiseStatus = ''
      this.queryParam.appraiseTiesId = ''
      this.getList()
    },
    reCalculatePage (count) {
      //总数量-count
      let total = this.ipagination.total - count;
      //获取删除后的分页数
      let currentIndex = Math.ceil(total / this.ipagination.pageSize);
      //删除后的分页数<所在当前页
      if (currentIndex < this.ipagination.current) {
        this.ipagination.current = currentIndex;
      }
      console.log('currentIndex', currentIndex)
    },
    tableChangeHandle (pagination, filters, sorter) {
      //分页、排序、筛选变化时触发
      //TODO 筛选
      console.log(pagination)
      this.ipagination = pagination;
      this.getList();
    },
    handleDetail(record) {
      this.assessmentDetailsVisible = true
      this.$nextTick(() => {
        this.$refs.assessmentDetails.queryParam.appraiserPhone = record.appraiserPhone
        this.$refs.assessmentDetails.queryParam.assessedId = record.assessedId
        this.$refs.assessmentDetails.queryParam.questionId = record.questionId
        this.$refs.assessmentDetails.init()
      })
    }
  }
}
</script>

<style scoped>

</style>
